<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>致敬西南交通大学</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 40px 0;
            background: linear-gradient(to right, #8B0000, #B22222);
            color: white;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .subtitle {
            font-size: 1.4rem;
            font-weight: 300;
            max-width: 800px;
            margin: 0 auto;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .card {
            flex: 1;
            min-width: 300px;
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }
        
        .card h2 {
            color: #8B0000;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .card p {
            margin-bottom: 15px;
            text-align: justify;
        }
        
        .history {
            background-color: #fff9f9;
        }
        
        .campus {
            background-color: #f9fff9;
        }
        
        .academic {
            background-color: #f9f9ff;
        }
        
        .love {
            background-color: #fffef0;
        }
        
        .quote {
            font-style: italic;
            text-align: center;
            padding: 20px;
            background: white;
            border-left: 4px solid #8B0000;
            margin: 30px 0;
            border-radius: 5px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .campus-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
                        url('https://via.placeholder.com/800x400/8B0000/FFFFFF?text=西南交通大学校园风光');
            background-size: cover;
            background-position: center;
            border-radius: 8px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }
        
        footer {
            text-align: center;
            padding: 20px;
            background: #333;
            color: white;
            border-radius: 10px;
            margin-top: 30px;
        }
        
        .heart {
            color: #ff4d4d;
            animation: heartbeat 1.5s infinite;
            display: inline-block;
        }
        
        @keyframes heartbeat {
            0% { transform: scale(1); }
            5% { transform: scale(1.1); }
            10% { transform: scale(1); }
            15% { transform: scale(1.1); }
            20% { transform: scale(1); }
            100% { transform: scale(1); }
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .subtitle {
                font-size: 1.1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>致敬西南交通大学</h1>
            <p class="subtitle">竢实扬华，交通天下 - 一所承载历史与梦想的百年学府</p>
        </header>
        
        <div class="campus-image">
            竢实扬华，自强不息
        </div>
        
        <div class="content">
            <div class="card history">
                <h2>百年传承</h2>
                <p>西南交通大学创建于1896年，是中国近代建校最早的高等学府之一。从山海关北洋铁路官学堂起步，历经百余年风雨，始终秉承"竢实扬华，自强不息"的交大精神。</p>
                <p>学校以"唐山交通大学"之名享誉海内外，素有"东方康奈尔"之美誉，为中国轨道交通事业培养了大批杰出人才。</p>
                <p>如今的西南交大，已发展成为一所以工科为主，工、理、管、经、文、法等多学科协调发展的全国重点大学。</p>
            </div>
            
            <div class="card campus">
                <h2>美丽校园</h2>
                <p>西南交通大学拥有犀浦、九里、峨眉三个校区，每个校区都独具特色。犀浦校区现代化设施完善，九里校区承载着深厚的历史底蕴，峨眉校区则坐落在风景秀丽的峨眉山脚下。</p>
                <p>春天的樱花大道，夏季的荷花池，秋日的银杏金黄，冬日的宁静校园，四季更迭中，西南交大始终展现着她独特的魅力。</p>
                <p>图书馆、教学楼、实验室、运动场，处处都留下了交大学子奋斗的身影和青春的回忆。</p>
            </div>
            
            <div class="card academic">
                <h2>学术卓越</h2>
                <p>西南交通大学在轨道交通领域独树一帜，拥有牵引动力国家重点实验室等多个国家级科研平台，为中国高铁事业发展做出了卓越贡献。</p>
                <p>学校在土木工程、机械工程、电气工程、计算机科学等领域同样实力雄厚，培养了一大批学术精英和行业领军人物。</p>
                <p>"严谨治学，严格要求"的双严传统，塑造了交大人务实创新的品格，使学校在国内外享有崇高声誉。</p>
            </div>
            
            <div class="card love">
                <h2>交大情怀</h2>
                <p>作为一名交大人，我深深热爱这片培育我们的土地。在这里，我们不仅学到了专业知识，更学会了如何做人、如何做事。</p>
                <p>交大精神已融入我们的血脉，"竢实扬华，自强不息"的校训激励着我们不断前行，在各自的领域发光发热。</p>
                <p>无论走到哪里，我们都会自豪地说：我是西南交大人！这份归属感和荣誉感，将伴随我们一生。</p>
            </div>
        </div>
        
        <div class="quote">
            <p>"一日交大人，一生交大情。西南交通大学不仅是一所学校，更是一种精神，一种传承，一种让我们引以为豪的身份。"</p>
        </div>
        
        <footer>
            <p>谨以此页表达对西南交通大学的深深敬意与热爱 <span class="heart">❤</span></p>
            <p>© 2023 西南交通大学致敬页面 | 竢实扬华，交通天下</p>
        </footer>
    </div>
</body>
</html>